<template>
    <van-search :value="value" @input="handleInput" placeholder="搜索商品名称" show-action >
      <template #left>
        <div @click="$router.go(-1)"><van-icon size="25px" name="arrow-left" /></div>
      </template>
      <template #action>
        <div @click="handleSearch"><van-icon name="search" size="27" /></div>
      </template>
    </van-search>
</template>
<script>
import Vue from 'vue'
import { Search, Icon } from 'vant'
import { commonLS } from '@/utils/common'

Vue.use(Icon)
Vue.use(Search)
export default {
  name: 'AppSearchHeader',
  props: ['value'],
  methods: {
    handleInput (e) {
      this.$emit('input', e)
    },
    handleSearch (e) {
      const [err, histories] = commonLS.get('search-history')
      if (err) {
        commonLS.put('search-history', [this.value])
      } else {
        histories.push(this.value)
        commonLS.put('search-history', Array.from(new Set(histories)))
      }
      this.$router.push({ name: 'list', query: { search: this.value } })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-search__header {
  /*  */
  .van-search {
    padding: 0px;
  }
}
</style>
